<template>
    <div class="pdl">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" active-text-color="#33A0FF"
            text-color="#595959" :ellipsis="false" @select="handleSelect">
            <el-menu-item :index="item.value" v-for="(item, index) in menuList" :key="item.value">{{ item.label
                }}</el-menu-item>
        </el-menu>
        <div class="assessment-list-box">
            <div class="assessment-list flex" v-for="item in list.items" @click="handleAssessmentDetails(item)"
                :key="item.test_id">
                <div class="flex1">
                    <div class="assessment-list-item flex">
                        <div class="assessment-list-item-title">{{ item.paper_name }}</div>
                        <el-tag type="info" v-if="item.status == 2">未考核</el-tag>
                        <el-tag type="success" v-if="item.status == 1">已完成</el-tag>
                        <el-tag type="info" v-if="item.status == 0">未完成</el-tag>
                        <el-tag type="primary" v-if="item.source == 'class'">班期</el-tag>
                        <el-tag type="primary" v-if="item.source == 'company'">企业</el-tag>
                        <el-tag type="primary" v-if="item.source == 'self'">自选考核库</el-tag>
                    </div>
                    <div class="assessment-list-items flex">
                        <div class="assessment-list-items-time">开始时间：{{ item.start_date || '-' }}</div>
                        <div class="assessment-list-items-time">结束时间：{{ item.end_date || '-' }}</div>
                        <div class="assessment-list-items-time flex align-center">
                            <span>倒计时：</span>
                            <span v-if="isCountdownActive(item)" style="line-height: 12px;">
                                <el-countdown :value="getEndDateTimestamp(item)" format="DD[天]H[h]mm[min]"
                                    :value-style="{ color: isCountdownLessThan24Hours(item) && item.status != 1 ? 'red' : '' }" />
                            </span>
                            <span v-else>已结束</span>
                        </div>
                        <div class="assessment-list-items-time">时长：{{ item.duration }}min</div>
                        <!-- v-if="!isCountdownActive(item)" -->
                        <div class="assessment-list-items-time" >得分：{{ item.score}}分
                        </div>

                    </div>
                </div>
                <el-button type="primary" v-if="item.status == 2">开始考核</el-button>
                <el-button type="primary" v-if="item.status == 1">重新考核</el-button>
                <el-button type="primary" v-if="item.status == 0">继续考核</el-button>
            </div>
        </div>
        <div class="flex mb-5">
            <div class="flex1"></div>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totalItems">
            </el-pagination>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { userApi } from '@/api/modules/user.js'
import dayjs from 'dayjs';
const router = useRouter()
const currentPage = ref(1);
const pageSize = ref(10);
const totalItems = ref(0); // 总条目数
const activeIndex = ref('3')
const menuList = ref([
    {
        label: '全部',
        value: '3'
    },
    {
        label: '未考核',
        value: '2'
    },
    {
        label: '待结业',
        value: '0'
    },
    {
        label: '已结业',
        value: '1'
    }
])
const list = ref([])
const props = defineProps({
  previewData: {
    type: Boolean,
    required: false,
    default: null
  },
  isResumePublic: Boolean
});
// 获取结束时间的时间戳
function getEndDateTimestamp(item) {
    return dayjs(item.end_date).valueOf();
}
// 判断倒计时是否小于24小时
function isCountdownLessThan24Hours(item) {
    const now = dayjs();
    const end = dayjs(item.end_date);
    return end.diff(now, 'hour') < 24;
}

// 判断倒计时是否还在进行中
function isCountdownActive(item) {
    const now = dayjs();
    const end = dayjs(item.end_date);
    return now.isBefore(end);
}
function handleSelect(value) {
    activeIndex.value = value;
    currentPage.value = 1;
    pageSize.value = 10;
    fetchData();
}
// 分页逻辑
function handleSizeChange(newSize) {
    pageSize.value = newSize;
    currentPage.value = 1;
    fetchData();
}

function handleCurrentChange(newPage) {
    currentPage.value = newPage;
    fetchData();
}
const handleAssessmentDetails = (item) => {
    sessionStorage.setItem('AssessmentDetails', JSON.stringify(item))
    router.push(`/assessment-details/${item.test_id}`)
}
const fetchData = async () => {
    try {
        const data = await userApi.getStudentExamRecord({
            status: activeIndex.value !== '3' ? activeIndex.value : '',
            page: currentPage.value,
            pageSize: pageSize.value
        });
        const items = data.items || [];
        const currentTime = dayjs();
        list.value = {
            items: items.sort((a, b) => {
                const endDateA = a.end_date;
                const endDateB = b.end_date;

                let dateA;
                let dateB;

                if (typeof endDateA === 'string') {
                    dateA = dayjs(endDateA);
                } else {
                    dateA = dayjs('9999-12-31');
                }

                if (typeof endDateB === 'string') {
                    dateB = dayjs(endDateB);
                } else {
                    dateB = dayjs('9999-12-31');
                }

                const isPastA = dateA.isBefore(currentTime);
                const isPastB = dateB.isBefore(currentTime);
                if (isPastA && !isPastB) {
                    return 1;
                }else if (!isPastA && isPastB) {
                    return -1;
                }else {
                    return dateA.valueOf() - dateB.valueOf();
                }
            }),
            total: data.total
        }
        totalItems.value = data.total;
    } catch (err) {
        console.log('Failed to fetch data:', err);
    }
};

onMounted(() => {
    fetchData();
});
</script>
<style lang="scss" scoped>
.el-menu-demo :deep(.el-menu-item:hover),
.el-menu-demo :deep(.el-menu-item.is-active),
.el-menu-demo :deep(.el-menu-item:focus) {
    background-color: transparent !important;
    /* 取消背景颜色变化 */
}

.el-menu-demo :deep(.is-active) {
    background-color: transparent !important;
}

.pdl {
    display: flex;
    padding-right: 20px;
    flex-direction: column;
    height: 100%;
}

.main-item {
    font-family: MiSans, MiSans;
    font-weight: 400;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.65);
    line-height: 24px;
    font-family: MiSans, MiSans;
    font-weight: 500;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.88);
    line-height: 24px;

    .assessment-list-box {
        cursor: pointer;
        // height: 550px;
        overflow: auto;
        margin-bottom: 20px;
        flex: 1;

        :deep(.el-tag) {
            margin-right: 10px;
        }
    }

    .assessment-list {
        padding: 16px 0;
        border-bottom: 1px solid #F0F0F0;
        font-family: MiSans, MiSans;
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.45);

        .assessment-list-items {
            margin-top: 10px;
            //justify-content: space-between;
            .assessment-list-items-time{
                width: 25%;
            }
            :deep(.el-statistic__number) {
                font-weight: 400;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.45);


            }
        }

        .assessment-list-item-title:hover {
            cursor: pointer;
            color: #33A0FF;
        }

        .assessment-list-item-title {
            font-weight: bold;
            margin-right: 8px;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.88);
            line-height: 24px;
        }
    }

    .main-item-content {
        margin-top: 24px;
        height: 756px;
        background: #FFFFFF;
        border-radius: 6px 6px 6px 6px;
        box-sizing: border-box;
        padding: 24px;

        .gun-item {
            font-family: MiSans, MiSans;
            font-weight: 500;
            font-size: 20px;
            color: rgba(0, 0, 0, 0.88);
            line-height: 28px;

            .gun {
                width: 4px;
                height: 20px;
                background: linear-gradient(180deg, #9DD1FF 0%, #33A0FF 100%);
                border-radius: 1px 1px 1px 1px;
                margin-right: 12px;
            }
        }
    }

}
</style>
